<template>
	<uni-nav-bar title="商品详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
	<swiper class="swiper" circular :autoplay="true">
		<swiper-item v-for="(item,index) in list" :key="index">
			<image :src="item" mode=""></image>
		</swiper-item>
	</swiper>
	<view class="shopdetail">
		<view>
			<text>￥</text>
			<text>{{shopAll.price}}</text>
			<text>￥{{shopAll.oprice}}</text>
		</view>
		<view>{{shopAll.name}}</view>
		<view>{{shopAll.subtitle}}</view>
		<view>{{shopAll.dispatch_type}}</view>
	</view>
	<view class="package parlour">
		<image :src="storeS.image" mode="aspectFill"></image>
		<view class="title_parlour">
			<view>{{storeS.name}}</view>
			<view>营业时间：{{storeS.time}}</view>
			<view>店铺地址：{{storeS.address}}</view>
		</view>
		<view class="text_parlour"><text
				@click="navTo('shopp/Shopkeeper?id='+storeID)">进入店铺</text><text>{{storeS.distance}}</text></view>
	</view>
	<view class="u-content">
		<rich-text :nodes="shopAll.content" class="uContent"></rich-text>
	</view>
	<view class="grid"></view>
	<!-- <dragImg @btnClick="surGroup()" :img_sub="Teammap4"></dragImg> -->
	<view class="bot">
		<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
			@buttonClick="buttonClick" />
	</view>
	<!-- 加入团惠包提示面板 -->
	<uni-popup ref="FramePopup" type="center" :is-mask-click="false">
		<bulletFrame :title="'我再逛逛'" :text="text" :content="content" @cancel="closeFrame" @submit="Subdrawal()" />
	</uni-popup>
	<uni-popup ref="Commodity" type="bottom" >
		<AddShop :shopAll="shopAll" :sureState="sureState" @submit="submit"></AddShop>
	</uni-popup>
	<Lotlats @position="position"></Lotlats>
</template>

<script setup lang="ts">
import { navBack, navTo,redirectTo } from '@/utils/navigator';
import dragImg from '@c/drag-button/drag-img.vue';
import { onLoad, onShow, onUnload, onHide } from '@dcloudio/uni-app';
import Lotlats from '@c/team/Lotlat.vue';
import { errorToast, successToast, showLoading } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import bulletFrame from '@c/pobulic/BulletFrame.vue';
import AddShop from '@c/order/addShop.vue';
import { Teammap4 } from '@/utils/Static';
import { shoppDetail, shopp, carNum } from '@/gql/shop';
import { ref, Ref } from 'vue';
import { getDriverID } from '@/stores/driverID';
const driver_id = getDriverID();
const FramePopup = ref(null);
const Commodity = ref(null);
const sureState = ref('');
const content = ref('');
const text = ref('');
const options = ref([
  {
    icon: 'headphones',
    text: '客服',
  },
  {
    icon: 'cart',
    text: '购物车',
    info: 0,
  },
]);
const buttonGroup = [
  {
    text: '加入购物车',
    backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
    color: '#fff',
  },
  {
    text: '立即购买',
    backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
    color: '#fff',
  },
];
const list = ref([]);
const shopID = ref('');
const storeID = ref('');
const lon = ref();
const lat = ref();
const shopAll: Ref<any> = ref({});
const storeS: Ref<any> = ref({});

const repeat = ref(true); //放重复点击
onLoad((pearm) => {
  shopID.value = pearm.id;
  storeID.value = pearm.storeId;
  init();
});
onShow(() => {
  carnum();
});
/**
 * 获取当前城市信息
 * @param {Object} lat 当前位置的纬度
 * @param {Object} lot 当前位置的经度
 */
function position(la, lo) {
  console.log(la, lo);
  lon.value = lo;
  lat.value = la;
  storeAll();
}
/**
 * 商品信息
 */
function init() {
  const payload = {
    query: shoppDetail,
    variables: {
      goods_id: Number(shopID.value),
    },
  };
  toPublish('ql/store/getGoodsInfo', payload, (obj: any) => {
    const { shop_goods_info } = obj.data;
    shopAll.value = shop_goods_info;
    list.value = shop_goods_info.images.split(',');
    // 假设htmlContent字段是后台返回的富文本字段
    const regex = new RegExp('img', 'gi');
    shop_goods_info.content = shop_goods_info.content.replace(regex, `img style="max-width:100%;"`); // 加上自己所需要的样式
  });
}
/**
 * 店铺信息
 */
function storeAll() {
  const payload = {
    query: shopp,
    variables: {
      lon: Number(lon.value),
      lat: Number(lat.value),
      store_id: Number(storeID.value),
    },
  };
  toPublish('ql/store/getShopInfo', payload, (obj: any) => {
    const { shop } = obj.data;
    storeS.value = shop;
  });
}
/**
 * 加入团惠包
 */
function surGroup() {
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    user_id: driver_id,
    goods_id: Number(shopID.value),
    store_id: Number(storeID.value),
  };
  toPublish('store/addCartTeam', payload, (obj: any) => {
    const { data, code, msg } = obj;
    console.log(data);
    if (code === 1) {
      repeat.value = true;
      // successToast(msg)
      text.value = '查看团惠包';
      content.value = '该商品已成功加入新团惠包';
      openFrame();
    } else {
      if (data.error == '0') {
        repeat.value = true;
        text.value = '结算团惠包';
        content.value = '当前新团惠包已加满，请提交完成后再创建团惠包。';
        openFrame();
      } else if (data.error == '1') {
        repeat.value = true;
        text.value = '查看团惠包';
        content.value = '该商品已加入新团惠包，每个商品只能加入一次新团惠包。';
        openFrame();
      } else {
        repeat.value = true;
        errorToast(msg);
      }
    }
  });
}
/**
 * 关闭弹框并跳转到团惠包编辑页面
 */
function Subdrawal() {
  closeFrame();
  navTo('groupBenefits/groupEditor');
}
/**
 * 打开选择商品弹框
 */
function openShop() {
  Commodity.value.open();
}
/**
 * 关闭选择商品弹框
 */
function closeShop() {
  Commodity.value.close();
}
/**
 * 打开加入团惠包弹框
 */
function openFrame() {
  FramePopup.value.open();
}
/**
 * 关闭加入团惠包弹框
 */
function closeFrame() {
  FramePopup.value.close();
}
/**
 * 购物车数量
 */
function carnum() {
  const payload = {
    query: carNum,
    variables: {
      user_id: driver_id,
    },
  };
  toPublish('ql/store/getCartShoppingNums', payload, (obj: any) => {
    const { cart_shopping_nums } = obj.data;
    options.value[1].info = cart_shopping_nums.nums;
  });
}
/**
 * @param {Object} e 左侧底部栏数据
 */
function onClick(e) {
  switch (e.content.text) {
    case '客服':
      uni.makePhoneCall({
        phoneNumber: '400 109 1606', //仅为示例
      });
      break;
    case '购物车':
      navTo('shopp/myCar');
      break;
  }
}
/**
 * 加入购物车
 */
function addCar(num) {
  showLoading();
  if (!repeat.value) {
    return;
  }
  repeat.value = false;
  const payload = {
    driver_id,
    goods_id: Number(shopID.value),
    store_id: Number(storeID.value),
    goods_nums: num,
  };
  toPublish('store/addCartShopping', payload, (obj: any) => {
    const { code, msg } = obj;
    if (code === 1) {
      repeat.value = true;
      carnum();
      successToast(msg);
    } else {
      repeat.value = true;
      errorToast(msg);
    }
  });
}
/**
 * @param {Object} e 右侧底部栏数据
 */
function buttonClick(e) {
  switch (e.content.text) {
    case '加入购物车':
      sureState.value = '1';
      openShop();
      break;
    case '立即购买':
      sureState.value = '2';
      openShop();
      break;
  }
}

function submit(num) {
  closeShop();
  switch (sureState.value) {
    case '1':
      addCar(num);
      break;
    case '2':
      const payload = {
        user_id: driver_id,
        goods_id: Number(shopID.value),
        store_id: Number(storeID.value),
        goods_nums: Number(num),
      };
      toPublish('store/addShopOrderBygoods', payload, (obj: any) => {
        const { code, msg, data } = obj;
        if (code === 1) {
          successToast(msg);
          uni.navigateTo({
            url: '/pages/shopp/sureOrder?id=' + data.order_id + '&shopName=' + storeS.value.name,
          });
        } else {
          errorToast(msg);
        }
      });
      break;
  }
}
onUnload(() => {
  closeFrame();
});
onHide(() => {
  closeFrame();
});
</script>

<style scoped lang="less">
@import url('../shopp/less/shopDetail.less');
.u-content {
  img {
    width: 100%;
    height: auto;
  }
}
</style>
<style>
.bot >>> .uni-tab__cart-box {
  height: 55px;
}
.uContent >>> img {
  width: 100%;
  height: auto;
}
</style>
